<template>
  <div class="container wh-100">
    <nav class="center">
      <div class="search-bar center">
        <el-input v-model="search" placeholder="输入关键字搜索" />
        <el-button type="primary" @click="goToDecoration"
          >添加用户/返回编辑页面</el-button
        >
      </div>
    </nav>
    <main>
      <el-table
        :data="
          formData.filter(
            (data) =>
              !search ||
              data.companyName.toLowerCase().includes(search.toLowerCase())
          )
        "
        stripe
        style="width: 100%"
        v-loading="isLoading"
      >
        <el-table-column type="index" label="Index" width="60">
        </el-table-column>
        <!-- 
            delivery:false
              desc:  "asdfbgdscewrwfsvc xdf"
              -companyEnName:"asdfghfds inc."
              -idNumber: 21323562
              -name: "asdfg"
              -scale:  "big"
              -resource  :"线下场地免费" -->
        <el-table-column label="公司名称" prop="companyName"> </el-table-column>
        <el-table-column label="公司英文名称" prop="companyEnName">
        </el-table-column>
        <el-table-column label="工商注册号/统一社会信用代码" prop="idNumber">
        </el-table-column>
        <el-table-column label="公司规模" prop="scale"> </el-table-column>
        <el-table-column label="特殊资源" prop="resource"> </el-table-column>
        <el-table-column label="活动性质" prop="type"> </el-table-column>
        <el-table-column label="活动形式" prop="description"> </el-table-column>
        <el-table-column label="删除数据" size="600" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              :loading="deleteRow.id === scope.row.id"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </main>
  </div>
</template>

<script>
import { formData } from "@/mockApi/information/user";
import { eventBus } from "@/utils/eventBus";

export default {
  name: "FormView",
  components: {},
  data() {
    return {
      formData: [],
      search: "",
      isLoading: false,
      deleteRow: {},
      searchName: "",
    };
  },
  /*
  @click=addeve
  */
  methods: {
    goToDecoration() {
      this.$router.push("/home/6-2");
      eventBus.$emit("jumpRouter", "/home/6-2");
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.deleteRow = row;
      formData.delete(row.id).then((res) => {
        console.log("Delete", res);
        this.$message.success(
          `删除 ${row.companyName} -成功,1s内更新数据。。。`
        );
        setTimeout(() => {
          this.refreshTable();
        }, 200);
      });
    },
    refreshTable() {
      this.isLoading = true;
      formData
        .getAll()
        .then((res) => {
          this.formData = res;
          this.$message.success("数据请求成功！");

          console.log(res);
        })
        .catch((err) => {
          this.$message.error("数据请求错误！", err);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
  },
  mounted() {
    this.refreshTable();
  },
};
</script>

<style scoped lang="scss">
.container {
  text-align: left;
  display: flex;
  flex-direction: column;
  nav {
    height: 60px;
    border: 1px solid #ccc;
    padding: 0;
    .search-bar {
      width: 55%;
      height: 80%;
    }
  }
  main {
    flex: 1;
  }
}
</style>
